<template>
  <div class="wp">
    <div class="header">
      <img src="@/assets/2_1.png" class="pic_1" />
      <img src="@/assets/2_2.png" class="pic_2" />
      <img src="@/assets/2_3.png" class="pic_3" />
      <van-search
        v-model="value"
        shape="round"
        background="#21272e"
        placeholder="搜索.."
        left-icon="none"
        @click="btn"
      />
    </div>
    <div class="header-r"></div>
    <div class="row-a1">
      <h3 @click="btn_two">分类排行 <img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in fenlei" :key="index" >
          <template #title>
            <van-image :src="item.img"  class="pic" @click="dj(item.id)"/>
            <h4 class="text">{{ item.text }}</h4>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <div class="row-a1">
      <h3 @click="btn_tree">作者排行 <img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in fenlei2" :key="index">
          <template #title>
            <van-image :src="item.img"  class="pic"/>
            <h4 class="text">{{ item.text }}</h4>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <div class="row-a2">
      <h3>新发布 <img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
     <ul class="ul-a2">
       <li v-for="(item, index) in news" :key="index" >
         <img :src="item.img" class="pic_n">
         <h2 class="t_name">{{item.name}}</h2>
         <h4 class="t_aur">{{item.author}}</h4>
       </li>
     </ul>
    </div>
    <div class="row-a3">
      <h3>热门搜索</h3>
      <span class="sp_1">2018排行榜</span>
      <span class="sp_2">职场热门</span>
      <span class="sp_3">都市言情</span>
      <span class="sp_4">哈弗大学经济管理类</span>
      <span class="sp_5">领导才能</span>
    </div>
    <div class="row-a4">
      <h3>热销榜 <img src="@/assets/2_jt.png" /> <span>查看全部</span></h3>
        <van-tabs v-model="active">
        <van-tab v-for="(item, index) in hot" :key="index">
          <template #title>
            <div class="a4_wp">
            <van-image :src="item.img"  class="pic_ht"/>
            <h4 class="name_a4">{{ item.name }}</h4>
            <h4 class="aut_a4">{{ item.author }}</h4>
            <img src="@/assets/2_gengduo.png"  class="pic_gd"/>
            <h4 class="txt_a4">{{item.txt}}</h4>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <div class="ft_r">
    </div>
  </div>
</template>

<script>  
export default {
  // 定义属性
  data () {
    return {
      fenlei: [
        { id: '1',
          img:require ('@/assets/2_4.png'),
          text: '科幻'
        },
        { 
          id: '2',
          img:require ('@/assets/2_5.png'),
          text: '生活'
        },
        {  
          id: '3',
          img:require ('@/assets/2_6.png'),
          text: '露营'
        },
        {  
          id: '4',
          img:require ('@/assets/2_7.png'),
          text: '职场'
        },
        { id: '5',
          img:require ('@/assets/2_4.png'),
          text: '科幻'
        },
        { 
          id: '6',
          img:require ('@/assets/2_5.png'),
          text: '生活'
        },
        {  
          id: '7',
          img:require ('@/assets/2_6.png'),
          text: '露营'
        },
        {  
          id: '8',
          img:require ('@/assets/2_7.png'),
          text: '职场'
        }
      ],
      fenlei2: [
        { id: '1',
          img:require ('@/assets/2_8.png'),
          text: '刘慈欣'
        },
        { 
          id: '2',
          img:require ('@/assets/2_9.png'),
          text: '田小花'
        },
        {  
          id: '3',
          img:require ('@/assets/2_10.png'),
          text: '马尔克斯'
        },
        {  
          id: '4',
          img:require ('@/assets/2_11.png'),
          text: '余秋雨'
        },
        { id: '5',
          img:require ('@/assets/2_8.png'),
          text: '刘慈欣'
        },
        { 
          id: '6',
          img:require ('@/assets/2_9.png'),
          text: '田小花'
        },
        {  
          id: '7',
          img:require ('@/assets/2_10.png'),
          text: '马尔克斯'
        },
        {  
          id: '8',
          img:require ('@/assets/2_11.png'),
          text: '余秋雨'
        }
      ],
      news: [
        {
          id :'1',
          img:require('@/assets/2_12.png'),
          name: '三体：死神永生',
          author: '刘慈心'
        },
        {
          id :'2',
          img:require('@/assets/2_13.png'),
          name: '人类简史',
          author: '尤瓦尔• 郝拉利'
        },
        {
          id :'3',
          img:require('@/assets/2_14.png'),
          name: '徐三观卖血记',
          author: '余华'
        },
        {
          id :'4',
          img:require('@/assets/2_15.png'),
          name: '未来简史',
          author: '尤瓦尔• 郝拉利'
        },
        {
          id :'5',
          img:require('@/assets/2_16.png'),
          name: '自私的基因',
          author: '理查德·道金斯'
        },
        {
          id :'6',
          img:require('@/assets/2_17.png'),
          name: '百年孤独',
          author: '马尔克斯'
        }
      ],
      hot:[
        {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
      {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
      {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
      {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
      {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
       {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
       {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
      ]
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    dj(DjId){
      this.$router.push({ path: '../classon' })
    },
     btn () {
      this.$router.push('/search')
    },
    btn_two() {
      this.$router.push('/cfn')
    },
    btn_tree() {
      this.$router.push('/author')
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {}
}
</script>

<style lang="less">
.header {
  width: 100%;
  height: 344px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #21272e;
  z-index: 999;
  .pic_1 {
    width: 34px;
    height: 33px;
    margin-top: 112px;
    margin-left: 48px;
  }
  .pic_2 {
    float: right;
    width: 34px;
    height: 28px;
    margin-top: 114px;
    margin-right: 48px;
  }
  .pic_3 {
    width: 40px;
    position: absolute;
    top: 235px;
    left: 82px;
  }
}
.header-r {
  height: 335px;
}
.van-search {
  margin-top: 15px;
  padding: 24px 50px;
  color: #9da3b4;
  padding-bottom: 0;
}
.van-search__content--round {
  background-color: #2d353d;
}
.van-field__body {
  font-size: 34px;
  height: 90px;
}
.van-field__control[type="search"] {
  padding-left: 55px;
  color: #9da3b4;
}
.row-a1 {
  overflow: hidden;
  border-bottom:6px solid  #2f343c ;
  margin-left: 50px;
  h3 {
    margin-top: 40px;
    font-size: 36px;
    font-weight: normal;
    color: #ffffff;
    span {
      float: right;
      margin-top: 3px;
      margin-right: 10px;
      font-size: 26px;
      color: #a2a8ba;
    }
    img {
      float: right;
      width: 10px;
      margin-top: 12px;
      margin-right: 50px;
    }
  }
  .van-tabs__nav--line{
 background-color: #21272e;
 margin-top: 50px;
}
.van-tabs--line .van-tabs__wrap{
  height: 100%;
}
.van-tabs__line{
  display: none;
}
.van-tabs__wrap--scrollable .van-tab{
  padding: 0;
  padding-right: 30px;
}
.van-tabs__nav--complete{
  padding-left: 0;
  padding-bottom: 45px;
}
.text{
  font-size: 28px;
	color: #ffffff;
}
}
.pic{
  float: left;
  margin-bottom: 15px;
  width: 160px;
	height: 160px;
}
.row-a2{
  border-bottom:6px solid  #2f343c ;
  margin-left: 50px;
  overflow: hidden;
  h3 {
    margin-top: 40px;
    font-size: 36px;
    font-weight: normal;
    color: #ffffff;
    span {
      float: right;
      margin-top: 3px;
      margin-right: 10px;
      font-size: 26px;
      color: #a2a8ba;
    }
    img {
      float: right;
      width: 10px;
      margin-top: 12px;
      margin-right: 50px;
    }
  }
  .ul-a2{
    overflow: hidden;
    width: 100%;
    margin-top: -40px;
    padding-bottom: 65px;
    li{
      width: 200px;
     float: left;
     padding-right: 30px;
       margin-top: 70px;
    }
  }
  .pic_n{
   width: 192px;
 
  }
  .t_name{
  margin: 0;
  font-size: 28px;
	font-weight: normal;
	font-stretch: normal;
	color: #ffffff;
  }
  .t_aur{
  padding-top: 5px;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	color: #5d637c;
  }
}
.row-a3{
  border-bottom:6px solid  #2f343c ;
  margin-left: 50px;
  overflow: hidden;
  padding-bottom: 35px;
    h3{
      line-height: 60px;
    margin-top: 40px;
    font-size: 36px;
    font-weight: normal;
    color: #ffffff;
  }
  .sp_1{
  margin-right: 30px;
	border-radius: 50px;
	border: solid 2px #f54d82;
  font-size: 24px;
	letter-spacing: 0px;
	color: #f54d82;
  padding: 15px 40px;
  }
  .sp_2{
  margin-right: 30px;
	border-radius: 50px;
	border: solid 2px #59b080;
  font-size: 24px;
	letter-spacing: 0px;
	color: #59b080;
  padding: 15px 40px;
  }
.sp_3{
  margin-right: 30px;
	border-radius: 50px;
	border: solid 2px #ec575e;
  font-size: 24px;
	letter-spacing: 0px;
	color: #ec575e;
  padding: 15px 40px;
  }
  .sp_4{
  margin-right: 30px;
	border-radius: 50px;
	border: solid 2px #9060e8;
  font-size: 24px;
	letter-spacing: 0px;
	color: #9060e8;
  padding: 15px 40px;
  }
  .sp_5{
  margin-right: 30px;
	border-radius: 50px;
	border: solid 2px #ded658;
  font-size: 24px;
	letter-spacing: 0px;
	color: #ded658;
  padding: 15px 40px;
  }
}
.row-a4{
  overflow: hidden;
  margin-left: 50px;
    h3 {
    margin-top: 40px;
    font-size: 36px;
    font-weight: normal;
    color: #ffffff;
    span {
      float: right;
      margin-top: 3px;
      margin-right: 10px;
      font-size: 26px;
      color: #a2a8ba;
    }
    img {
      float: right;
      width: 10px;
      margin-top: 12px;
      margin-right: 50px;
    }
  }
  .a4_wp{
  margin-top: 35px;
  width: 598px;
	height: 250px;
  border-radius: 20px;
  background-color: #2b323b;
  }
  .pic_ht{
    float: left;
    width: 168px;
    margin-top: -35px;
    margin-left: 40px;
    margin-right: 29px;
  }
  .name_a4{
    padding-top: 28px;
    float: left;
    font-size: 36px;
  	font-weight: normal;
	  font-stretch: normal;
	  letter-spacing: 0px;
	  color: #ffffff;
  }
  .pic_gd{
    margin-top: -85px;
    margin-right: 20px;
    float: right;
    width: 30px;
  }
  .aut_a4{
  float: left;
  padding-top: 5px;
  padding-bottom: 15px;
  width: 334px;
  font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #5d637c;
  border-bottom: solid 1px #363d47;
  }
  .txt_a4{
  margin-top: 5px;
  float: left;
  width: 340px;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 36px;
	letter-spacing: 0px;
	color: #868dab;
  }
}
.ft_r{
  height: 170px;
}
  .van-tabs__nav--line{
 background-color: #21272e;
 margin-top: 50px;
}
.van-tabs--line .van-tabs__wrap{
  height: 100%;
}
.van-tabs__line{
  display: none;
}
.van-tabs__wrap--scrollable .van-tab{
  padding: 0;
  padding-right: 30px;
}
.van-tabs__nav--complete{
  padding-left: 0;
  padding-bottom: 45px;
}
</style>
